<template>
  <div style="position: relative;">
    <div ref="color" class="top">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div ref="color_" style="top:30px" class="top ">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="billboard">
      <div class="billboard-text">给李子恒组投票，谢谢~~</div>
    </div>
    <div class="TemaName">
      <span>李靖威</span>
      <span>周凯玲</span>
      <span>李子恒</span>
      <span>魏泽阳</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LightVue',

  data () {
    return {

    }
  },

  mounted () {
    this.LigthColor()
    console.log(this.getRandomColor())
  },

  methods: {
    // 生成随机颜色
    getRandomColor () {
      // 生成随机的 RGB 颜色
      var r = Math.floor(Math.random() * 256)
      var g = Math.floor(Math.random() * 256)
      var b = Math.floor(Math.random() * 256)

      // 将 RGB 颜色转换为十六进制格式
      var hex = '#' + r.toString(16) + g.toString(16) + b.toString(16)

      return hex
    },
    LigthColor () {
      const span = this.$refs.color.querySelectorAll('span')
      const span_ = this.$refs.color_.querySelectorAll('span')
      let color = 0
      let color_ = 0
      const LigthColor = () => {
        for (let i = 0; i < span.length; i++) {
          span[i].style.background = '#fff'
        }
        // 当前灯颜色
        span[color].style.background = '#FFFF00'
      // 灯亮时间
      }
      const LigthColor_ = () => {
        for (let i = 0; i < span_.length; i++) {
          span_[i].style.background = '#fff'
        }
        // 当前灯颜色
        span_[color_].style.background = '#fc22e4'
      // 灯亮时间
      }
      // 定时器
      setInterval(() => {
        color = color === 19 ? 0 : color + 1
        color_ = color_ === 19 ? 0 : color_ + 1
        //  console.log(color);
        LigthColor()
        LigthColor_()
      }, 50)
    }
  }
}
</script>

<style lang="scss" scoped>
.TemaName{
  position: absolute;
  left: 400px;
  width: 200px;
  height: 50px;
  top: -30px;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  span{
    width: 70px;
    height: 30px;
  }
}
.top{
  position: absolute;
  display: flex;
  top: -15px;
  left: -200px;
    span{
      margin-right: 12px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      background: red;
    }
}
.billboard {
  position: relative;
  left: -100px;
  top: -10px;
  width: 300px;
  height: 50px;
  // background-color: #22e1cb;
  // opacity: 0.5;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.billboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // background-image: linear-gradient(to left bottom, rgb(255,255,0), rgb(0,51,153));
  z-index: 1;
  animation: fade-in 1s ease-out infinite;
}

.billboard-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px #000;
  animation: slide-in 5s ease-out infinite;
}
@keyframes slide-in {
  0% {
    left: 100%;
    font-size: 10px;
    // transform: translate3d(20%);
  }
  10%{
    font-size: 15px;
  }
  20%{
    font-size: 20px;
  }
  50% {
    left: 0;
    font-size: 25px;
  }
  70%{
    font-size: 20px;
  }
  90%{
    font-size: 15px;
  }
  100% {
    left: -100%;
    font-size: 10px;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
</style>
